<template>
  <div class="app-container detail">
    <el-row class="headline">
      <el-col :span="3">
        <span>催收记录详情</span>
      </el-col>
      <el-col :span="9" :offset="7">
        <el-steps align-center :space="100">
          <el-step title="初审" class="stepActive" />
          <el-step title="复审" class="stepActive" />
          <el-step title="终审" class="stepActive" />
          <el-step title="放款" class="stepActive" />
          <el-step title="还款" class="stepActive" />
          <el-step title="完成" />
        </el-steps>
      </el-col>
      <el-col :span="1" :offset="1">
        <el-button
          size="small"
          :icon="Printer"
          v-print="printObj"
          @click="upadtaPrintStatus"
          >打印</el-button
        >
      </el-col>
      <el-col :span="1" :offset="1">
        <el-button size="small" @click="goBack" :icon="ArrowLeft"
          >返回</el-button
        >
      </el-col>
    </el-row>
    <div ref="printTest" id="printTest">
      <div class="info-title">（客户【{{ customerName }}】）</div>
      <el-row justify="center">
        <el-col :span="16">
          <div style="margin-top: 20px">
            <TabAcross title="逾期信息" :list="loanList"></TabAcross>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <div class="info-title">提醒记录</div>
    <el-row justify="center">
      <el-col :span="23">
        <el-table :data="alertRecordList">
          <el-table-column
            label="期限"
            align="center"
            key="stages_phase"
            prop="stages_phase"
            width="60px"
          />
          <el-table-column
            label="应还款日"
            align="center"
            key="pmt_due_date"
            prop="pmt_due_date"
          />
          <el-table-column
            label="实际还款日"
            align="center"
            key="grace_date"
            prop="grace_date"
            width="140px"
          >
            <template #default="scope">
              <div>{{ scope.row.grace_date }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="本金"
            align="center"
            key="ctd_principal_amt"
            prop="ctd_principal_amt"
          />
          <el-table-column
            label="利息"
            align="center"
            key="ctd_interesta_amt"
            prop="ctd_interesta_amt"
          />
          <el-table-column
            label="管理费"
            align="center"
            key="manage_amt"
            prop="manage_amt"
          />
          <el-table-column
            label="还款总额"
            align="center"
            key="stages_amount"
            prop="stages_amount"
          />
          <el-table-column
            label="减免金额"
            align="center"
            key="reduction_amt"
            prop="reduction_amt"
          />
          <el-table-column
            label="逾期天数"
            align="center"
            key="overdue_days"
            prop="overdue_days"
          />
          <el-table-column
            label="状态"
            align="center"
            key="status"
            prop="status"
          />
          <el-table-column
            label="提交人"
            align="center"
            key="submitter_name"
            prop="submitter_name"
          />
          <el-table-column
            label="提交时间"
            align="center"
            key="submit_time"
            prop="submit_time"
            width="120px"
          />
          <el-table-column
            label="还款备注"
            align="center"
            key="submit_str"
            prop="submit_str"
            width="120px"
          >
            <template #default="scope">
              <div>{{ scope.row.submit_str }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="审核意见"
            align="center"
            key="review_str"
            prop="review_str"
          />
          <el-table-column
            label="审核人"
            align="center"
            key="reviewer_name"
            prop="reviewer_name"
          />
        </el-table>
      </el-col>
    </el-row> -->
  </div>
</template>
<script setup name="Paydetail">
import { ArrowLeft, Printer } from "@element-plus/icons-vue";
import { detail, alertList } from "@/api/collection/record";

import { methodType, loanTypes } from "@/utils/dict";

import { onActivated, reactive } from "vue";
import { getId } from "@/utils/auth";
import TabAcross from "@/components/TabAcross";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const customerName = ref("");
const aduitShow = ref(false);
const cutomerList = ref([]);
const alertRecordList = ref([])

const data = reactive({
  aduitForm: {
    id: undefined,
    apply_id: undefined,
    review_result: undefined,
    review_str: undefined,
  },
  customerInfos: {
    user_name: "",
    loan_type_classify: "",
    loan_type_name: "",
    loan_stages: "",
    apply_quota: "",
    method_type: "",
    contract_amount: "",
    approval_amount: "",
    purpose_name: "",
    approval_rate: "",
  },
  rulest: {
    review_result: [
      { required: true, message: "请选择审核结论", trigger: "change" },
    ],
  },
});
const { aduitForm, customerInfos, rulest } = toRefs(data);
const loanList = ref([]);
const costList = ref([]);
const bankList = ref([
  [
    { title: "开户行：", value: "中国银行" },
    { title: "户名：", value: "李海" },
  ],
  [
    { title: "开户地：", value: "广东省 深圳市 福田区" },
    { title: "支行名称：", value: "开户行支行名称" },
  ],
  [{ title: "银行帐号：", value: "6225 8888 8888 8888" }],
]);
function viewDetail() {
  detail(history.state.infos.apply_id).then((res) => {
    console.log(res);
    cutomerList.value = res.data.map((item) => {
      item.pmt_due_date = item.pmt_due_date.slice(0, 10);
      item.grace_date = item.grace_date?.slice(0, 10);
      return item;
    });
  });
}
/**获取数据信息*/
function getInfos() {
  customerInfos.value = { ...history.state.infos };
  customerName.value = history.state.infos.user_name;
  loanList.value = [
    [
      {
        title: "客户姓名：",
        value: customerInfos.value.user_name,
        link: "客户资料档案",
      },
      { title: "担保类型：", value: loanTypes(customerInfos.value.loan_type) },
    ],
    [
      { title: "担保编号：", value: customerInfos.value.apply_id },
      { title: "合同号：", value: customerInfos.value.contract_code },
    ],
    [
      {
        title: "当前逾期期数：",
        value:
          customerInfos.value.stages_phase +
          "/" +
          customerInfos.value.loan_stages,
      },
      { title: "逾期本金：", value: customerInfos.value.ctd_principal_amt },
    ],
    [
      { title: "逾期利息：", value: customerInfos.value.ctd_interesta_amt },
      { title: "担保管理费：", value: customerInfos.value.apply_quota },
    ],
    [
      { title: "本期还款日：", value: customerInfos.value.grace_date },
      { title: "逾期天数：", value: customerInfos.value.overdue_days },
    ],
    [
      { title: "逾期风险等级：", value: customerInfos.value.risk },
      { title: "催收次数：", value: customerInfos.value.num },
    ],
  ];
}
function getList() {
  loading.value = true;
  alertList(customerInfos.value.id).then((response) => {
    alertRecordList.value = response.data.list;
    loading.value = false;
  });
}
/** 返回 */
function goBack() {
  proxy.$tab.closeOpenPage("pay");
}
let printObj = reactive({
  id: "printTest", //绑定打印区域id
  popTitle: "", //内容标签
  beforeOpenCallback(vue) {
    console.log("打开之前");
  },
  //调用打印工具成功回调函数
  openCallback(vue) {
    console.log("执行了打印");
  },
  //关闭打印机的回调
  closeCallback(vue) {
    console.log("关闭了打印工具");
  },
});
function upadtaPrintStatus() {}
getInfos();
viewDetail();
</script>
<style lang="scss" scoped>
.info-title {
  line-height: 72px;
  text-align: center;
}
.detail {
  overflow: hidden;
}
.detail:deep(.el-step__line) {
  background: #fff;
  opacity: 0;
}
:deep(.el-step__icon.is-text) {
  border: 1px solid;
}
:deep(.el-step__icon) {
  height: 14px;
  width: 14px;
}
:deep(.el-steps) {
  background: #f2f2f2;
  margin-top: 3px;
}
:deep(.el-step.is-horizontal) {
  display: flex;
  padding-right: 5px;
}
:deep(.el-step__title) {
  line-height: 20px;
}
:deep(.el-step__main) {
  white-space: nowrap;
}
:deep(.el-step__head.is-finish) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-finish) {
  color: #333;
}
:deep(.el-step__head.is-wait) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-wait) {
  color: #333;
}
:deep(.el-step__title.is-process) {
  color: #333;
  font-weight: 400;
}
:deep(.el-step__head.is-process) {
  font-weight: none;
  color: #333;
  border-color: #333;
}
.stepActive {
  background: black;
  :deep(.el-step__title) {
    line-height: 20px;
  }
  :deep(.el-step__title.is-finish) {
    color: #fff;
  }
  :deep(.el-step__title.is-wait) {
    color: #fff;
  }
  :deep(.el-step__title.is-process) {
    color: #fff;
    font-weight: 400;
  }
}
</style>
